<template>
  <div>
    <el-button v-if="!id" @click="goBack" type="primary" style="margin-top: 10px; margin-left: 20px">返回</el-button>
    <page-main>
      <h2>任务信息</h2>
      <el-row>
        <el-col :span="4">
          <div class="labelTitle">任务名称</div>
        </el-col>
        <el-col :span="20">
          <div class="labelContent">{{ taskInfo.name }}</div>
        </el-col>
        <el-col :span="4">
          <div class="labelTitle">备注</div>
        </el-col>
        <el-col :span="20">
          <div class="labelContent">{{ taskInfo.remark }}</div>
        </el-col>
        <el-col :span="4">
          <div class="labelTitle">所属单位</div>
        </el-col>
        <el-col :span="20">
          <div class="labelContent">{{ taskInfo.unit_name }}</div>
        </el-col>
        <el-col :span="4" v-if="taskInfo.sub_name">
          <div class="labelTitle">所属商户</div>
        </el-col>
        <el-col :span="20" v-if="taskInfo.sub_name">
          <div class="labelContent">{{ taskInfo.sub_name }}</div>
        </el-col>
        <el-col :span="4">
          <div class="labelTitle">开始时间</div>
        </el-col>
        <el-col :span="4">
          <div class="labelContent">
            {{ formatDate(taskInfo.start_time * 1000) }}
          </div>
        </el-col>
        <el-col :span="4">
          <div class="labelTitle">结束时间</div>
        </el-col>
        <el-col :span="4">
          <div class="labelContent">
            {{ formatDate(taskInfo.end_time * 1000) }}
          </div>
        </el-col>
        <el-col :span="4">
          <div class="labelTitle">完成时间</div>
        </el-col>
        <el-col :span="4">
          <div class="labelContent">
            {{ formatDate(taskInfo.finish_time * 1000) }}
          </div>
        </el-col>
        <el-col :span="4">
          <div class="labelTitle">巡查人员</div>
        </el-col>
        <el-col :span="20" style="display: flex; justify-content: center; align-items: center">
          <!-- <div class="labelContent">{{ taskInfo.title }}</div> -->
          <span v-for="item of taskInfo.user" :key="item.id" style="margin-left: 10px">
            {{ item.realname }}
          </span>
        </el-col>
        <el-col :span="4">
          <div class="labelTitle">巡查点数</div>
        </el-col>
        <el-col :span="20">
          <div class="labelContent">{{ pointNum }}</div>
        </el-col>
        <el-col :span="4">
          <div class="point">巡查点位</div>
        </el-col>
        <el-col :span="20" style="display: flex; justify-content: center; flex-wrap: wrap">
          <span v-for="item in pointLists" :key="item.id" style="margin-left: 10px; width: 30%; display: inline-block">
            {{ item.name }} {{ item.is_patrol == 1 ? '(已完成)' : '(未完成)' }}
          </span>
        </el-col>
      </el-row>
    </page-main>
    <page-main>
      <h2>日志</h2>
      <el-table :data="taskLog" style="width: 100%" :default-sort="{ prop: 'id', order: 'descending' }">
        <el-table-column label="巡查点名称" prop="point_name"> </el-table-column>
        <el-table-column label="巡查点位置" prop="point_address"></el-table-column>
        <el-table-column label="巡查人" prop="real_name"></el-table-column>
        <el-table-column label="巡查结果" prop="result"></el-table-column>
        <el-table-column label="巡查时间">
          <template #default="scope">
            <span>
              {{ formatDate(scope.row.add_time * 1000) }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="remark"> </el-table-column>
        <el-table-column label="操作" fixed="right">
          <template #default="scope">
            <el-button size="mini" @click="showTaskDetail(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </page-main>
  </div>
</template>
<script>
export default {
  data() {
    return {
      task_id: 0,
      taskInfo: {},
      pointNum: 0,
      taskLog: [],
      pointLists: []
    }
  },
  props: ['id'],
  created() {
    this.task_id = this.$route.query.id || this.id
    this.getInfo()
    this.getPointNum()
    this.getTaskLog()
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    showTaskDetail(row) {
      this.$router.push({
        name: 'unitPatrolPointDetailInfo',
        query: {
          task_id: this.$route.query.id,
          point_id: row.point_id
        }
      })
    },
    getInfo() {
      this.$api.post('/unit/PatrolInfo/find', { task_id: this.task_id }).then((res) => {
        this.taskInfo = res.data
      })
    },
    // 获取巡查点数
    getPointNum() {
      this.$api
        .post('/unit/PatrolPosition/lists', {
          task_id: this.task_id,
          page: 1,
          rows: 1000
        })
        .then((res) => {
          this.pointLists = res.data.lists
          this.pointNum = res.data.total
        })
    },
    // 日志
    getTaskLog() {
      this.$api.post('/unit/PatrolInfo/record', { task_id: this.task_id, rows: 1000 }).then((res) => {
        this.taskLog = res.data.lists
      })
    },
    // 时间转换
    formatDate(timeStamp) {
      if (!timeStamp) return ''
      timeStamp = +timeStamp
      var date = new Date(timeStamp)
      // 年月日
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      month = month < 10 ? '0' + month : month
      var day = date.getDate()
      day = day < 10 ? '0' + day : day
      // 时分秒
      var hour = date.getHours()
      hour = hour < 10 ? '0' + hour : hour
      var min = date.getMinutes()
      min = min < 10 ? '0' + min : min
      var sec = date.getSeconds()
      sec = sec < 10 ? '0' + sec : sec
      // return year + "-" + month + "-" + day;
      return year + '-' + month + '-' + day + ' ' + hour + ':' + min + ':' + sec
    }
  }
}
</script>
<style>
.labelTitle {
  background-color: #fafafa;
  color: #909399;
  font-weight: bold;
  padding: 17px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ebeef5;
}
.labelContent {
  padding: 17px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #ebeef5;
  height: 57px;
}
.point {
  border: 1px solid #ebeef5;
  background-color: #fafafa;
  color: #909399;
  text-align: center;
  font-weight: bold;
  border-bottom: none;
}
</style>
